<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
body{
     margin: 0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
            }
li{
	list-style: none;
	float: left;
}
a{  display: block;
	text-decoration: none;
	padding: 10px 15px;
	background-color: #eee;
	margin-right: 2px;
	color: #000;
}
div{width: 960px;
margin:0 auto;}
*{
	margin: 0;
	padding: 0;
}
.nav{
	text-align: center;
	margin: 0;
	padding-top:2px; 
}
ul>li>ul>li{
	float: none;
	margin: 0;
}
ul>li{
	position: relative;
}
ul>li>ul>li>a{
	margin-top: 2px;
	text-align: center;
}
ul>li>a:hover{
	background-color: #bbb;
	color: #fff;
}
ul>li>ul{
	margin-top: 0;
	position: absolute;
	
	display: none;}
ul>li:hover ul{
	display: block;
}

		</style>
	</head>
	<body>
	<div>
		<ul class="nav">
			<li><a href="##">Home</a>
                <ul>
                	<li><a href="##">My Study</a></li>
                	<li><a href="##">My Homework</a></li>
                	<li><a href="##">My Note</a></li>
                </ul>
			</li>
			<li><a href="##">CSS3</a></li>
			<li><a href="##">jQuery</a></li>
			<li><a href="##">Html</a></li>
		</ul>
	</div>
	</body>
</html>